<template>
  <el-dialog :title="title" class="addArge" width="350px" :visible.sync="isDial" :before-close='closeDialog'>
    <el-form :model="form" size="mini" :rules="rules" ref="addArge">
      <el-form-item prop='start'>
        <el-input v-model="form.start" maxlength='5' class="leftBorder" autocomplete="off"></el-input>&nbsp;&nbsp;~&nbsp;&nbsp;
        <el-input v-model="form.end" maxlength='5' class="leftBorder" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="saveArge">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            form:{
                start:"",
                end:"",
            },
            title:'添加面积',
            isDial:false,
            rules: {
                start: [
                    {
                        pattern: /^[0-9]*$/g,
                        required: true,
                        message: "面积必须是纯数字",
                        trigger: "blur"
                    }
                ]
            },
        }
    },
    created(){
        this.$root.$on("addArge",data=>{
            this.isDial=true;
        })
    },
    methods:{
        saveArge(){
            let that=this
            let form=that.form
            this.$refs.addArge.validate(valid => {
                // console.log(valid)
                if(!valid){
                    return
                }
                let url='build/area'
                let mat='POST'
                let params={
                    start:parseInt(form.start),
                    end:parseInt(form.end)
                }
                request.ajaxPost({
                    url,
                    that,
                    type:mat,
                    params,
                    fn(res) {
                        // console.log(res);
                        that.isDial=false
                        that.$root.$emit('areaAllocation','on')
                    }
                });
            })
        },
        resetForm(formName) {
            let form=this.form
            for(let i in form){
                form[i]=""
            }
        },
        closeDialog(){
            this.isDial=false
            this.resetForm("addArge");
        },
    }
};
</script>
<style lang="less" scoped>
.addArge{
    text-align: left;
    .el-input{
        width: 140px;
    }
}
</style>
